<template>
  <div>
    <form>
      <h1>单文件上传</h1>
      <input class="file" type="file"/>
      <button type="submit" @click="handleClick($event, '.file', 'upload')">
        提交
      </button>
      <h1>多文件上传</h1>
      <input class="files" type="file" multiple/>
      <button type="submit" @click="handleClick($event, '.files', 'uploads')">
        提交
      </button>
      <h1>视频上传（切片、断点续传）</h1>
      <h2>进度</h2>
      <input class="video" type="file"/>
      <button type="submit" @click="handleVideo($event, '.video', 'video')">
        提交
      </button>
    </form>
  </div>
</template>

<script>
import axios from  'axios'

export default {
  name: "Main",
  data() {
    return {
      // 记录需要上传的文件下标
      count: 0
    }
  },
  methods: {
    // 上传普通文件
    handleClick(event, name, url) {
      // 阻止浏览器默认表单事件
      event.preventDefault();
      // 获取表单文件列表
      let files = document.querySelector(name).files;
      // 创建formData
      let formData = new FormData();
      // 单|多文件上传
      [...files].forEach(element => {
        formData.append("file", element);
      });
      // 请求接口
      axios.post(`http://localhost:8080/${url}`, formData)
        .then(response => {
          alert(response.data.msg);
        });
    },
    // 上传视频（切片，模拟断点续传）
    handleVideo() {
      console.log(111)
    },
    // 请求接口，查询上传文件是否存在
    // count为0表示不存在，count不为0则已上传对应切片数
    handleCancel() {

    }
  }
}
</script>

<style scoped>

</style>
